<template>
  <div id="userList">
      <find @find="queryUser"></find>
      <a-table
      ref="table"
      :columns="columns"
      :data-source="list"
      :rowKey="(record) => record.id"
      :pagination="pagination"
    >
        <template #headImg="text">
            <img :src="text" class="headImg">
        </template>

        <template #status="text">
            <a-tag
            :color="text === 1? 'green': 'volcano'">
                {{ text === 1 ? "启用" : "禁用" }}
            </a-tag>
        </template>

        <template #createTime="text">
            <span>{{ dataReset(text) }}</span>
        </template>
        

        <template #do="tetx,record">
          <a @click="userUpdateStatus(record)">{{
            record.status === -1 ? "启用" : "禁用"
          }}</a>
          <a-divider type="vertical" />
          <a @click="showInfoFrom(record)">详情</a>
          <a-divider type="vertical" />
          <a @click="handleDelete(record)">删除</a>
        </template>
    </a-table>

    <form-box title="用户详情"
    @hide="hideInfoFrom"
    @update="hideInfoFrom"
    v-show="showInfo" class="user-info-from">
    <a-form :label-col="{ span: 7 }" :wrapper-col="{ span: 15 }">
      <a-row class="user-info">
       <a-col :span="10">
          <a-row align="middle">
            <a-col>
              <a-form-item label="用户账号">
                <a-input size="small" :disabled="true" :value="GetUser.name"></a-input>
              </a-form-item>
            </a-col>
            <a-col>
              <a-form-item label="姓名">
                <a-input size="small" :disabled="true" :value="GetUser.nickname"></a-input>
              </a-form-item>
            </a-col>
            <a-col>
              <a-form-item label="地址">
                <a-input size="small" :disabled="true" :value="GetUser.address"></a-input>
              </a-form-item>
            </a-col>
            <a-col>
              <a-form-item label="手机号码">
                <a-input size="small" :disabled="true" :value="GetUser.phone"></a-input>
              </a-form-item>
            </a-col>
            <a-col>
              <a-form-item label="注册时间">
                <a-input size="small" :disabled="true" :value="dataReset(GetUser.createTime)"></a-input>
              </a-form-item>
            </a-col>
          </a-row>
       </a-col>
       <a-col :span="6">
         <a-button type="" size="small" @click="showRenzInfoFrom()">认证信息详情</a-button>
       </a-col>
       <a-col :span="8">
           <a-form-item label="头像">
             <img :src="member.memberInfo?member.memberInfo.headImg:''">
           </a-form-item>
       </a-col>
      </a-row>
      <a-row>
        <a-col :span="3">宠物信息</a-col>
      </a-row>

      <a-row v-for="(pet,index) in GetPet" :key="index">
        <a-col :span="3">
            <img :src="pet.headImg" style="width: 100px; height: 100px;">
        </a-col>
        <a-col :span="21">
            <a-row>
              <a-col :span="20">
                  <a-form-item label="昵称">
                      <a-input size="small" :disabled="true" :value="pet.nickname"
                      :suffix="pet.pure===1?'确认为纯种':''"></a-input>
                  </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="7">
                  <a-form-item label="类别">
                      <a-input size="small" :disabled="true" defaultValue="汪星人"
                      :value="pet.type===0?'汪星人':(pet.type===1?'喵星人':'其他')"></a-input>
                  </a-form-item>
              </a-col>
              <a-col :span="7">
                  <a-form-item label="年龄">
                      {{ pet.age }}月
                  </a-form-item>
              </a-col>
              <a-col :span="7">
                  <a-form-item label="驱虫">
                    {{ pet.wormState===1?"未驱虫":(pet.wormState===2?"已驱虫":"不详") }}
                  </a-form-item>
              </a-col>
            </a-row>
            
            <a-row>
              <a-col :span="7">
                  <a-form-item label="品种">
                      <a-input size="small" :disabled="true" defaultValue="其他"
                      :value="pet.type===2?'其他':pet.breed"></a-input>
                  </a-form-item>
              </a-col>
              <a-col :span="7">
                  <a-form-item label="体重">
                      {{pet.weight }}kg
                  </a-form-item>
              </a-col>
              <a-col :span="7">
                  <a-form-item label="绝育">
                    {{ pet.neuterState===1?"未绝育":(pet.neuterState===2?"已绝育":"不详") }}
                  </a-form-item>
              </a-col>
            </a-row>

            <a-row>
              <a-col :span="7">
                  <a-form-item label="性别">
                      <a-input size="small" :disabled="true" defaultValue="男孩子"
                      :value="pet.gender===0?'女孩子':(pet.type===1?'男孩子':'保密')"></a-input>
                  </a-form-item>
              </a-col>
              <a-col :span="7">
                  <a-form-item label="疫苗">
                      {{ pet.vaccineState===1?"未接种":(pet.vaccineState===2?"接种中":(pet.vaccineState===3?"已接种":"不详")) }}
                  </a-form-item>
              </a-col>
              <a-col :span="10">
                  <a-form-item label="宠物特点">
                    <a-tag v-for="(tag,i) in GetTag(index)" :key="i">
                        {{ tag }}
                    </a-tag>
                  </a-form-item>
              </a-col>
            </a-row>
        </a-col>
      </a-row>
    </a-form>
    </form-box>


    <form-box title="认证信息"
    @hide="hideRenzInfoFrom"
    @update="hideRenzInfoFrom"
    v-show="showRenzInfo" class="user-info-from">
    <a-form>
    
        <a-row>
            <a-col :span="12">
                <a-row>
                  <a-form-item label="身份证照片人像面">
                      <img :src="proveInfo.idCardFace" style="width: 95%; height: 160px">
                  </a-form-item>
                </a-row>
                <a-row>
                  <a-form-item label="身份证照片国徽面">
                      <img :src="proveInfo.idCardBack" style="width: 95%; height: 160px">
                  </a-form-item>
                </a-row>
                <a-row>
                  <a-form-item label="手持身份证人像面正面照">
                      <img :src="proveInfo.idCardHead" style="width: 95%; height: 160px">
                  </a-form-item>
                </a-row>
            </a-col>
            <a-col :span="12">
                <a-form :label-col="{ span: 7 }" :wrapper-col="{ span: 15 }">
                <a-row>
                  <a-form-item label="身份证号">
                      <a-input :value="proveInfo.idCard"></a-input>
                  </a-form-item>
                </a-row>
                <a-row>
                  <a-form-item label="性别">
                      <a-input :value="GetUser.gender===1?'男':'女'"></a-input>
                  </a-form-item>
                </a-row>
                <a-row>
                  <a-form-item label="居住地">
                      <a-input :value="GetUser.simpleCity"></a-input>
                  </a-form-item>
                </a-row>
                <a-row>
                  <a-form-item label="详细地址">
                      <a-textarea :value="GetUser.address"></a-textarea>
                  </a-form-item>
                </a-row>
                <a-row>
                  <a-form-item label="领域签名">
                      <a-input :value="GetUser.sign"></a-input>
                  </a-form-item>
                </a-row>
                <a-row>
                    <a-form-item label="证明材料">
                      <img :src="img" style="width: 60px; height: 60px; margin: 5px;" 
                      v-for="(img,index) in GetProveImgs" :key="index">
                      
                    </a-form-item>
                  
                </a-row>

                </a-form>
            </a-col>
        </a-row>

    </a-form>
    </form-box>
  </div>
</template>

<script>
import moment from "moment";
import Find from '@/components/Find.vue'
import { getUserList, userUpdateStatus, userDelete, userInfo } from "@/api/user/userList"
import { getProveList } from "@/api/user/Renz";
import FormBox from '@/components/formBox.vue';

export default {
  components: { Find, FormBox },
  data() {
      return {
          //pagination a-table设置
          proveInfo: [],
          pagination:{
              pageSize: 9,
          },
          showInfo: false,
          showRenzInfo: false,
          list: [],
          member: {},
          columns: [
            {
                title: "ID",
                dataIndex: "id",
                key: "id",
            },
            {
                title: "用户账号",
                dataIndex: "name",
                key: "name",
            },
            {
                title: "昵称",
                dataIndex: "nickname",
                key: "nickname",
            },
            {
                title: "地址",
                dataIndex: "city",
                key: "city",
            },
            {
                title: "头像",
                dataIndex: "headImg",
                key: "headImg",
                scopedSlots: { customRender: "headImg" },
            },
            {
                title: "手机号",
                dataIndex: "phone",
                key: "phone",
            },
            {
                title: "状态",
                dataIndex: "status",
                key: "status",
                scopedSlots: { customRender: "status" },
            },
            {
                title: "注册时间",
                dataIndex: "createTime",
                scopedSlots: { customRender: "createTime" },
            },
            {
                title: "操作",
                dataIndex: "do",
                key: "do",
                scopedSlots: { customRender: "do" },
            }
          ],
      }
  },
  methods:{
    dataReset: (time) => {
      return moment(time).format("YYYY-MM-DD");
    },
    //========find========
    queryUser(value){
      if(value == "") this.getUserList();
      else{
        getUserList({
            memberType: "",
            pageNumber: 1,
            pageSize: 50,
        }).then((res)=> {
            console.log("======userList======",res.data.data.content);
            this.list = res.data.data.content.filter(item => 
                (item.id === value|| item.name === value|| item.phone === value|| item.nickname === value)
            );
        }).catch((_) => {
            console.log(_);
            //   this.confirmLoading = false;
        });
      }
    },
    //=========api============
    getUserList(){
      getUserList({
          memberType: "",
        pageNumber: 1,
        pageSize: 50,
      }).then((res)=> {
          console.log("======userList======",res.data.data.content);
          this.list = res.data.data.content;
      }).catch((_) => {
          console.log(_);
          //   this.confirmLoading = false;
        });
    },
    userUpdateStatus(data){
        userUpdateStatus({
            id: data.id,
            status: -data.status
        }).then((res)=> {
            console.log("======updateStatus=====", res);
            this.getUserList();
        })
    },
    handleDelete(user){
        userDelete({
            id: user.id,
        }).then((res)=> {
            console.log("======删除======", res);
            this.getUserList();
        })
    },
    handleInfo(user){
        userInfo({
            id: user.id,
        }).then((res)=> {
            console.log("========userInfo=======", res.data.data);
            this.member = res.data.data;
        })
    },
    //========showFrom==========
    hideInfoFrom(){
        this.showInfo = false;
    },
    showInfoFrom(user){
        this.showInfo = true;
        this.handleInfo(user);
    },
    //=======PetInfo=========
    GetTag(index){
        return this.member.memberPet?(this.member.memberPet[index]?this.member.memberPet[index].trait.split(","):["安静","稳重","可爱"]):["安静","稳重","可爱"];
    },
    GetPetInfo(index, value){
        if(this.GetPet[index]) return this.GetPet[index][value];
        else return "";
    },
    //=======memberInfo======
    GetMemberInfo(index, value){
        if(this.GetMemberInfo[index]) return this.GetMemberInfo[index][value];
        else return "";
    },
    //======认证信息详情==========
    hideRenzInfoFrom(){
        this.showRenzInfo = false;
    },
    showRenzInfoFrom(){
        getProveList({
            pageNumber: 1,
            pageSize: 47,
            // name: this.GetUser.name,
            // phone: this.GetUser.phone,
            nickname: this.GetUser.nickname
        }).then((res)=> {
            let list = res.data.data.content;
            console.log("========认证信息=======", list);
            //console.log(list.filter(item=> this.GetUser.id === item.id)[0]);
            if(list.lenght>0) this.proveInfo = list[0];
            
            this.showRenzInfo = true;
        })
    },
  },
  computed:{
    GetUser(){
      return this.member.memberInfo?this.member.memberInfo:"";
    },
    GetPet(){
        return this.member.memberPet?this.member.memberPet:"";
    },
    GetProveImgs(){
        if(this.proveInfo.signImgs) return this.proveInfo.signImgs.split(",");
        else return ['','','','',''];
    },
  },
  mounted(){
    this.getUserList();
  },//http://123.57.249.44:5656/down/KShpi8WFKKOI
}
</script>

<style>
    .headImg{
        width: 35px;
    }
    .user-info-from{
        width: 800px;
        left: 350px;
    }
    .user-info img{
        width: 150px;
    }
    .user-info-from .ant-form-item{
        margin-bottom: 0;
    }
</style>